<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
        <div class="component-content">
        	<div class="disFlex" style="margin: 0 17px">
                <div class="component-title" style="margin-bottom: 16px;">{{moduleData.label_name_cn}}</div>
            </div>
        	<div v-html="htmlString" style="min-height: 100px;"></div>

        </div>
    </div>
</template>

<script>

export default {
  	name: 'TextModule',		
	props: {
		/**
	     * @description 起始值，即动画开始前显示的数值
	     */
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {

    	}
    },
    methods: {
    	delModule() {
			this.$emit("delModule",this.moduleData);		
    	}
    },
    computed: {
    	htmlString() {
		  if (!this.moduleData.data) {
			return "";
		  } else {
 			return this.moduleData.data
	        .replace(this.moduleData.data ? /&(?!#?\w+;)/g : /&/g, '&amp;')
	        .replace(/&lt;/g, "<")
	        .replace(/&gt;/g, ">")
	        .replace(/&quot;/g, "\"")
	        .replace(/&#39;/g, "\'");
		  }
	     
	    }
    },
    created() {
    },
    components: {
	}
 }
</script>

<style>
img {
	max-width: 100%;
}
</style>
<style scoped>	
@import url("../baseModule.less");

</style>
